import React from "react";

class Carousel extends React.Component {
  state = {};
  render() {
    return (
      <div className="carousel slide" data-bs-ride="carousel">
        <div className="carousel-indicators">
          <button
            type="button"
            data-bs-target="#carouselExampleIndicators"
            data-bs-slide-to={0}
            className
            aria-label="幻灯片 1"
          />
          <button
            type="button"
            data-bs-target="#carouselExampleIndicators"
            data-bs-slide-to={1}
            aria-label="幻灯片 2"
            className="active"
            aria-current="true"
          />
          <button
            type="button"
            data-bs-target="#carouselExampleIndicators"
            data-bs-slide-to={2}
            aria-label="幻灯片 3"
            className
          />
        </div>
        <div className="carousel-inner">
          <div className="carousel-item">
            <svg
              className="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
              width={800}
              height={400}
              xmlns="http://www.w3.org/2000/svg"
              role="img"
              aria-label="占位符：第一张幻灯片"
              preserveAspectRatio="xMidYMid slice"
              focusable="false"
            >
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#777" />
              <text x="50%" y="50%" fill="#555" dy=".3em">
                First slide
              </text>
            </svg>
          </div>
          <div className="carousel-item active">
            <svg
              className="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
              width={800}
              height={400}
              xmlns="http://www.w3.org/2000/svg"
              role="img"
              aria-label="占位符：第二张幻灯片"
              preserveAspectRatio="xMidYMid slice"
              focusable="false"
            >
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#666" />
              <text x="50%" y="50%" fill="#444" dy=".3em">
                Second slide
              </text>
            </svg>
          </div>
          <div className="carousel-item">
            <svg
              className="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
              width={800}
              height={400}
              xmlns="http://www.w3.org/2000/svg"
              role="img"
              aria-label="占位符：第三张幻灯片"
              preserveAspectRatio="xMidYMid slice"
              focusable="false"
            >
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#555" />
              <text x="50%" y="50%" fill="#333" dy=".3em">
                Third slide
              </text>
            </svg>
          </div>
        </div>
        <button
          className="carousel-control-prev"
          type="button"
          data-bs-target="#carouselExampleIndicators"
          data-bs-slide="prev"
        >
          <span className="carousel-control-prev-icon" aria-hidden="true" />
          <span className="visually-hidden">
            <font style={{ verticalAlign: "inherit" }}>
              <font style={{ verticalAlign: "inherit" }}>以前的</font>
            </font>
          </span>
        </button>
        <button
          className="carousel-control-next"
          type="button"
          data-bs-target="#carouselExampleIndicators"
          data-bs-slide="next"
        >
          <span className="carousel-control-next-icon" aria-hidden="true" />
          <span className="visually-hidden">
            <font style={{ verticalAlign: "inherit" }}>
              <font style={{ verticalAlign: "inherit" }}>下一个</font>
            </font>
          </span>
        </button>
      </div>
    );
  }
}

export default Carousel;
